<template>
	<view class="student-dashboard">
		<!-- 顶部标题 -->
		<view class="dashboard-header">
			<text class="title">学生数据分析</text>
			<view class="date-info">{{ currentDate }}</view>
		</view>

		<!-- 顶部优秀学生展示 -->
		<view class="top-students">
			<!-- 总学分最高 -->
			<view class="top-student-card">
				<image class="student-avatar" src="/static/aver1.jpg" mode="aspectFill"></image>
				<view class="student-info">
					<text class="title">总学分最高</text>
					<text class="name">{{ topTotalScore.name }}</text>
					<text class="score">{{ topTotalScore.score }}分</text>
				</view>
			</view>

			<!-- 本周最高分 -->
			<view class="top-student-card">
				<image class="student-avatar" src="/static/aver1.jpg" mode="aspectFill"></image>
				<view class="student-info">
					<text class="title">本周最高分</text>
					<text class="name">{{ topWeeklyScore.name }}</text>
					<text class="score">{{ topWeeklyScore.score }}分</text>
				</view>
			</view>

			<!-- 今日进步最快 -->
			<view class="top-student-card">
				<image class="student-avatar" src="/static/aver1.jpg" mode="aspectFill"></image>
				<view class="student-info">
					<text class="title">进步最快</text>
					<text class="name">{{ mostImproved.name }}</text>
					<text class="score">+{{ mostImproved.improvement }}分</text>
				</view>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="charts-section">
			<!-- 学科加分分布图（玫瑰图） -->
			<view class="chart-container">
				<text class="chart-title">学科加分分布</text>
				<qiun-data-charts type="rose" :chartData="subjectScoreData" :opts="roseOpts" />
			</view>
			<!-- 学分分布雷达图 -->
			<view class="chart-container">
				<text class="chart-title">学分分布雷达图</text>
				<qiun-data-charts type="radar" :chartData="radarData" :opts="radarOpts" />
			</view>


		</view>

		<!-- 主要内容区 -->
		<view class="main-content">
			<!-- 左侧区域 - 本周学分趋势大图 -->
			<view class="left-section">

				<!-- 修改后的学分排名部分 -->
				<view class="vertical-ranking">
					<text class="section-title">本周学分荣耀榜</text>
					<scroll-view class="ranking-list" scroll-y>
						<view class="ranking-item" v-for="(student, index) in weeklyRanking" :key="index"
							:class="getRankClass(index)">
							<view class="rank-info">
								<view class="rank-badge" :style="{background: getRankBadgeColor(index)}">
									<text class="rank-number">{{ index + 1 }}</text>
								</view>
								<text class="rank-title">{{ getRankTitle(index) }}</text>
							</view>
							<view class="student-info">
								<image class="avatar" src="/static/aver1.jpg" mode="aspectFill"></image>
								<text class="name">{{ student.name }}</text>
							</view>
							<view class="score-info">
								<text class="score">{{ student.score }}分</text>
								<view class="progress-tag"
									:class="{'up': student.progress > 0, 'down': student.progress < 0}">
									<text class="progress-icon">{{ student.progress > 0 ? '↑' : '↓' }}</text>
									<text class="progress-value">{{ Math.abs(student.progress) }}%</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="weekly-trend-chart">
					<text class="section-title">本周学分趋势</text>
					<qiun-data-charts type="line" :chartData="lineData" :opts="lineOpts" />
				</view>
			</view>

			<!-- 右侧区域 -->
			<view class="right-section">
				<!-- 最近加分记录 -->
				<view class="recent-scores">
					<view class="section-header">
						<text class="section-title">最近加分记录</text>
						<view class="section-underline"></view>
					</view>
					<scroll-view class="score-list" scroll-y>
						<view v-for="(record, index) in recentScores" :key="index" class="score-item"
							:style="{'animation-delay': `${index * 0.1}s`}">
							<image class="avatar" src="/static/aver1.jpg" mode="aspectFill"></image>
							<view class="info">
								<text class="name">{{ record.name }}</text>
								<text class="reason">{{ record.reason }}</text>
								<text class="time">{{ record.time }}</text>
							</view>
							<text class="score">+{{ record.score }}</text>
						</view>
					</scroll-view>
				</view>

				<!-- 今日学科表扬区域 -->
				<view class="subject-praise">
					<text class="section-title">今日学科表扬</text>
					<view class="subject-list">
						<view class="subject-item" v-for="(subject, index) in praisedBySubject" :key="index">
							<text class="subject-name">{{ subject.name }}</text>
							<view class="students-container">
								<view class="student-tag" v-for="(student, i) in subject.students" :key="i">
									<image class="avatar" src="/static/aver1.jpg" mode="aspectFill"></image>
									<text class="student-name">{{ student.name }}</text>
									<text class="praise-reason">{{ student.reason }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 修改后的课程打卡部分 -->
				<view class="course-photos">
					<view class="section-header">
						<text class="section-title">课程打卡记录</text>
						<view class="photo-count">{{ coursePhotos.length }}/5</view>
					</view>
					<scroll-view class="photo-list" scroll-x v-if="coursePhotos.length > 4">
						<view class="photo-item" v-for="(photo, index) in coursePhotos" :key="index"
							@click="previewImage(index)">
							<image class="photo" :src="photo.url" mode="aspectFill"></image>
							<view class="photo-info">
								<text class="time">{{ photo.time }}</text>
								<text class="teacher">打卡老师: {{ photo.teacher }}</text>
							</view>
						</view>
					</scroll-view>
					<view class="photo-list" v-else>
						<view class="photo-item" v-for="(photo, index) in coursePhotos" :key="index"
							@click="previewImage(index)">
							<image class="photo" :src="photo.url" mode="aspectFill"></image>
							<view class="photo-info">
								<text class="time">{{ photo.time }}</text>
								<text class="teacher">打卡老师: {{ photo.teacher }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 在学习趋势分析上方添加 -->
		<view class="homework-submission">
			<text class="section-title">作业提交情况</text>
			<view class="submission-content">
				<!-- 左侧图表区域 -->
				<view class="submission-chart">
					<qiun-data-charts type="ring" :chartData="homeworkData" :opts="ringOpts" />
				</view>

				<!-- 右侧提交记录 -->
				<scroll-view class="submission-list" scroll-y>

					<text class="section-title">最近提交</text>
					<view class="submission-item" v-for="(item, index) in recentSubmissions" :key="index">
						<image class="submission-avatar" src="/static/aver1.jpg" mode="aspectFill"></image>
						<view class="submission-info">
							<text class="subject">{{ item.subject }}</text>
							<text class="student">{{ item.student }} 提交</text>
							<text class="time">{{ item.time }}</text>
						</view>
						<image class="submission-preview" :src="item.preview" mode="aspectFill"
							@click="previewHomework(index)"></image>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 学习趋势分析 -->
		<view class="trend-analysis">
			<text class="section-title">学习趋势分析</text>
			<view class="analysis-content">
				<view class="analysis-chart">
					<qiun-data-charts type="column" :chartData="trendData" :opts="columnOpts" />
				</view>
				<view class="analysis-text">
					<view class="analysis-item" v-for="(item, index) in trendAnalysis" :key="index">
						<text class="item-title">{{ item.title }}</text>
						<text class="item-value">{{ item.value }}</text>
						<text class="item-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homeworkData: {
					series: [{
							name: "语文",
							data: 3
						},
						{
							name: "数学",
							data: 7
						},
						{
							name: "英语",
							data: 5
						},
						{
							name: "物理",
							data: 2
						}
					]
				},
				ringOpts: {
					color: ["#4e7af3", "#91CB74", "#F78FB3", "#36D1DC"],
					padding: [15, 15, 15, 15],
					dataLabel: true,
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15
						}
					}
				},
				recentSubmissions: [{
						subject: "数学作业",
						student: "张三",
						time: "10:30",
						preview: "/static/aver1.jpg"
					},
					{
						subject: "语文作文",
						student: "李四",
						time: "09:45",
						preview: "/static/aver1.jpg"
					},
					{
						subject: "英语练习",
						student: "王五",
						time: "昨天",
						preview: "/static/aver1.jpg"
					},
					{
						subject: "物理实验",
						student: "赵六",
						time: "昨天",
						preview: "/static/aver1.jpg"
					},
					{
						subject: "数学练习",
						student: "钱七",
						time: "前天",
						preview: "/static/aver1.jpg"
					},
					{
						subject: "语文阅读",
						student: "孙八",
						time: "前天",
						preview: "/static/aver1.jpg"
					}
				],
				coursePhotos: [{
						url: '/static/back7.jpg',
						time: '10:30',
						teacher: '张老师'
					},
					{
						url: '/static/back7.jpg',
						time: '11:45',
						teacher: '李老师'
					},
					{
						url: '/static/back7.jpg',
						time: '14:20',
						teacher: '王老师'
					},
					{
						url: '/static/back7.jpg',
						time: '15:30',
						teacher: '赵老师'
					},
					{
						url: '/static/back7.jpg',
						time: '16:10',
						teacher: '钱老师'
					},
					// {
					// 	url: '/static/back7.jpg',
					// 	time: '16:10',
					// 	teacher: '钱老师'
					// }
				],
				weeklyRanking: [{
						name: '张三',
						score: 28,
						progress: 15
					},
					{
						name: '李四',
						score: 25,
						progress: 12
					},
					{
						name: '王五',
						score: 24,
						progress: 18
					},
					{
						name: '赵六',
						score: 22,
						progress: 8
					},
					{
						name: '钱七',
						score: 20,
						progress: -5
					},
					{
						name: '孙八',
						score: 19,
						progress: 5
					},
					{
						name: '周九',
						score: 18,
						progress: 3
					},
					{
						name: '吴十',
						score: 17,
						progress: -2
					},
					{
						name: '吴十一',
						score: 15,
						progress: 5
					}
				],
				rankIcons: [
					'/static/ranks/king.png', // 最强王者
					'/static/ranks/star.png', // 至尊星耀
					'/static/ranks/diamond.png', // 永恒钻石
					'/static/ranks/platinum.png', // 尊贵铂金
					'/static/ranks/gold.png', // 荣耀黄金
					'/static/ranks/silver.png', // 秩序白银
					'/static/ranks/bronze.png', // 倔强青铜
					'/static/ranks/iron.png' // 坚韧黑铁
				],
				currentDate: '',
				topTotalScore: {
					name: '张三',
					score: 98,
				},
				topWeeklyScore: {
					name: '李四',
					score: 24,
				},
				mostImproved: {
					name: '王五',
					improvement: 15,
				},
				praisedBySubject: [{
						name: '数学',
						students: [{
								name: '王五',
								reason: '解题思路清晰'
							},
							{
								name: '赵六',
								reason: '作业全对'
							}
						]
					},
					{
						name: '语文',
						students: [{
								name: '钱七',
								reason: '作文优秀'
							},
							{
								name: '孙八',
								reason: '背诵流利'
							}
						]
					},
					{
						name: '英语',
						students: [{
								name: '周九',
								reason: '口语出色'
							},
							{
								name: '吴十',
								reason: '听写满分'
							}
						]
					}
				],
				recentScores: [{
						name: '张三',
						score: 2,
						reason: '课堂回答问题',
						time: '10:30'
					},
					{
						name: '李四',
						score: 1,
						reason: '按时交作业',
						time: '09:45'
					},
					{
						name: '王五',
						score: 3,
						reason: '小组项目领导',
						time: '昨天'
					},
					{
						name: '赵六',
						score: 1,
						reason: '课堂纪律好',
						time: '昨天'
					},
					{
						name: '钱七',
						score: 2,
						reason: '额外作业完成',
						time: '前天'
					}
				],
				radarData: {
					categories: ['作业', '测验', '课堂', '项目', '参与', '纪律'],
					series: [{
							name: '平均分',
							data: [90, 85, 88, 82, 92, 95]
						},
						{
							name: '最高分',
							data: [100, 98, 100, 95, 100, 100]
						}
					]
				},
				radarOpts: {
					color: ["#1890FF", "#91CB74"],
					padding: [15, 15, 15, 15],
					// dataLabel: true,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridColor: "#DDDDDD",
							gridCount: 5,
							opacity: 0.2,
							max: 100,
							labelColor: "#666666"
						}
					}
				},
				lineData: {
					categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					series: [{
							name: '班级平均分',
							data: [12, 18, 15, 22, 20, 18, 25]
						},
						{
							name: '最高分',
							data: [18, 24, 22, 30, 28, 25, 32]
						}
					]
				},
				lineOpts: {
					color: ["#1890FF", "#91CB74"],
					padding: [15, 15, 15, 15],
					dataLabel: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				},
				subjectScoreData: {
					series: [{
							name: "数学",
							data: 35
						},
						{
							name: "语文",
							data: 28
						},
						{
							name: "英语",
							data: 22
						},
						{
							name: "物理",
							data: 15
						},
						{
							name: "化学",
							data: 12
						},
						{
							name: "生物",
							data: 8
						}
					]
				},
				roseOpts: {
					color: ["#1890FF", "#36D1DC", "#8A63F2", "#F78FB3", "#FF9A9E", "#91CB74"],
					padding: [15, 15, 15, 15],
					dataLabel: true,
					extra: {
						rose: {
							type: "radius",
							radius: 50,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							minAngle: 5
						}
					}
				},
				trendData: {
					categories: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
					series: [{
							name: "班级平均分",
							data: [65, 72, 78, 75, 80, 85]
						},
						{
							name: "最高分",
							data: [85, 88, 90, 92, 95, 98]
						}
					]
				},
				columnOpts: {
					color: ["#1890FF", "#91CB74"],
					padding: [15, 15, 15, 15],
					dataLabel: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					}
				},
				trendAnalysis: [{
						title: "整体趋势",
						value: "上升",
						desc: "班级平均分每周增长约3分"
					},
					{
						title: "进步最快",
						value: "第6周",
						desc: "平均分提升5分"
					},
					{
						title: "最高分趋势",
						value: "稳定增长",
						desc: "每周保持2-3分增长"
					},
					{
						title: "预测下周",
						value: "87-90分",
						desc: "基于当前增长趋势"
					}
				]
			}
		},
		mounted() {
			this.updateCurrentDate();
		},
		methods: {
			previewHomework(index) {
				const urls = this.recentSubmissions.map(item => item.preview);
				uni.previewImage({
					current: urls[index],
					urls: urls,
					indicator: 'number',
					loop: true
				});
			},
			// 新增方法 - 获取排名徽章颜色
			getRankBadgeColor(index) {
				const colors = [
					'linear-gradient(135deg, #FFD700, #FFA500)', // 第一名金色
					'linear-gradient(135deg, #C0C0C0, #A9A9A9)', // 第二名银色
					'linear-gradient(135deg, #CD7F32, #A0522D)', // 第三名铜色
					'linear-gradient(135deg, #4e7af3, #8a63f2)', // 4-8名蓝色系
					'linear-gradient(135deg, #36D1DC, #5B86E5)',
					'linear-gradient(135deg, #FF9A9E, #F78FB3)',
					'linear-gradient(135deg, #91CB74, #58B19F)',
					'linear-gradient(135deg, #BDC3C7, #7F8C8D)'
				];
				return colors[Math.min(index, colors.length - 1)];
			},
			previewImage(index) {
				const urls = this.coursePhotos.map(item => item.url);
				uni.previewImage({
					current: urls[index],
					urls: urls,
					indicator: 'number',
					loop: true
				});
			},
			updateCurrentDate() {
				const date = new Date();
				const options = {
					year: 'numeric',
					month: 'long',
					day: 'numeric',
					weekday: 'long'
				};
				this.currentDate = date.toLocaleDateString('zh-CN', options);
			},

			// 新增的3个方法
			getRankClass(index) {
				const classes = ['king', 'star', 'diamond', 'platinum', 'gold', 'silver', 'bronze', 'iron'];
				return classes[Math.min(index, classes.length - 1)];
			},
			getRankIcon(index) {
				const icons = ['👑', '⭐', '💎', '🔘', '🏆', '⚪', '🟤', '⚫'];
				return icons[Math.min(index, icons.length - 1)];
			},
			getRankTitle(index) {
				const titles = ['最强王者', '至尊星耀', '永恒钻石', '尊贵铂金', '荣耀黄金', '秩序白银', '倔强青铜', '坚韧黑铁'];
				return titles[Math.min(index, titles.length - 1)];
			},
			updateCurrentDate() {
				const date = new Date();
				const options = {
					year: 'numeric',
					month: 'long',
					day: 'numeric',
					weekday: 'long'
				};
				this.currentDate = date.toLocaleDateString('zh-CN', options);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.student-dashboard {
		display: flex;
		flex-direction: column;
		// height: 100vh;
		padding: 30rpx;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
		// overflow: auto;
	}

	.dashboard-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			letter-spacing: 2rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -10rpx;
				left: 0;
				width: 100rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #4e7af3, #8a63f2);
				border-radius: 3rpx;
			}
		}

		.date-info {
			font-size: 28rpx;
			color: #666;
			background: rgba(255, 255, 255, 0.7);
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		}
	}

	.course-photos {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

		.section-header {
			margin-bottom: 30rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 15rpx;
			}

			.section-underline {
				width: 80rpx;
				height: 4rpx;
				background: linear-gradient(90deg, #4e7af3, #8a63f2);
				border-radius: 2rpx;
			}
		}

		.photo-list {
			white-space: nowrap;
			height: 300rpx;
			width: 880rpx;

			.photo-item {
				display: inline-block;
				width: 220rpx;
				height: 260rpx;
				margin-right: 20rpx;
				border-radius: 16rpx;
				overflow: hidden;
				position: relative;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:last-child {
					margin-right: 0;
				}

				&:active {
					transform: scale(0.95);
				}

				.photo {
					width: 100%;
					height: 160rpx;
				}

				.photo-info {
					padding: 15rpx;
					background: #fff;

					.time {
						display: block;
						font-size: 24rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 5rpx;
					}

					.teacher {
						display: block;
						font-size: 22rpx;
						color: #666;
					}
				}
			}
		}
	}

	.vertical-ranking {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		// margin-top: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 30rpx;
			text-align: center;
			position: relative;

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				width: 80rpx;
				height: 2rpx;
				background: linear-gradient(90deg, transparent, #4e7af3);
			}

			&::before {
				left: 50rpx;
			}

			&::after {
				right: 50rpx;
				background: linear-gradient(90deg, #4e7af3, transparent);
			}
		}

		.ranking-list {
			.ranking-item {
				// height: 100rpx;
				display: flex;
				align-items: center;
				padding: 25rpx 30rpx;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 0.9);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
				position: relative;
				overflow: hidden;

				&:last-child {
					margin-bottom: 0;
				}

				// 不同段位的背景装饰
				&.king {
					border-left: 8rpx solid #FFD700;
					background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.9));
				}

				&.star {
					border-left: 8rpx solid #A020F0;
					background: linear-gradient(90deg, rgba(160, 32, 240, 0.1), rgba(255, 255, 255, 0.9));
				}

				&.diamond {
					border-left: 8rpx solid #1E90FF;
					background: linear-gradient(90deg, rgba(30, 144, 255, 0.1), rgba(255, 255, 255, 0.9));
				}

				&.platinum {
					border-left: 8rpx solid #C0C0C0;
				}

				&.gold {
					border-left: 8rpx solid #FFD700;
				}

				&.silver {
					border-left: 8rpx solid #C0C0C0;
				}

				&.bronze {
					border-left: 8rpx solid #CD7F32;
				}

				&.iron {
					border-left: 8rpx solid #5D4037;
				}

				.rank-info {
					width: 180rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.rank-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					.rank-title {
						font-size: 24rpx;
						font-weight: bold;
						color: #333;
						text-align: center;
					}
				}

				.student-info {
					flex: 1;
					display: flex;
					align-items: center;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						border: 3rpx solid #fff;
						box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
					}

					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}
				}

				.score-info {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.score {
						font-size: 32rpx;
						font-weight: bold;
						color: #4e7af3;
						margin-bottom: 10rpx;
					}

					.progress-tag {
						display: flex;
						align-items: center;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						font-size: 22rpx;

						&.up {
							background: rgba(46, 204, 113, 0.2);
							color: #2ECC71;
						}

						&.down {
							background: rgba(231, 76, 60, 0.2);
							color: #E74C3C;
						}

						.progress-icon {
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}

	.homework-submission {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 30rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -10rpx;
				left: 0;
				width: 100rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #4e7af3, #8a63f2);
				border-radius: 3rpx;
			}
		}

		.submission-content {
			display: flex;

			.submission-chart {
				flex: 1;
				padding-right: 20rpx;

				qiun-data-charts {
					width: 100%;
					height: 300rpx;
				}
			}

			.submission-list {
				flex: 1;
				max-height: 500rpx;
				border-left: 1rpx dashed #eee;
				padding-left: 20rpx;
				box-shadow: 20px 19px 20px 0px rgba(0, 0, 0, 0.05);

				.submission-item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}

					.submission-avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 15rpx;
						border: 2rpx solid #fff;
						box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
					}

					.submission-info {
						flex: 1;

						.subject {
							font-size: 26rpx;
							font-weight: bold;
							color: #333;
							display: block;
						}

						.student {
							font-size: 24rpx;
							color: #666;
							display: block;
						}

						.time {
							font-size: 22rpx;
							color: #999;
							display: block;
						}
					}

					.submission-preview {
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
						margin-left: 15rpx;
						box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
						transition: all 0.3s ease;

						&:active {
							transform: scale(0.95);
						}
					}
				}
			}
		}
	}

	.vertical-ranking {
		.ranking-list {
			max-height: 1370rpx;
		}

		.ranking-item {
			.rank-info {
				.rank-badge {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

					.rank-number {
						color: #fff;
						font-size: 28rpx;
						font-weight: bold;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
					}
				}

				.rank-title {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	/* 修改后的课程打卡样式 */
	.course-photos {
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.photo-count {
				font-size: 28rpx;
				color: #666;
				background: rgba(78, 122, 243, 0.1);
				padding: 6rpx 16rpx;
				border-radius: 20rpx;
			}
		}

		.photo-list {
			display: flex;

			&.scroll-view {
				white-space: nowrap;
			}

			.photo-item {
				flex: 0 0 220rpx;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	/* 添加滚动条样式 */
	scroll-view {
		&::-webkit-scrollbar {
			width: 6rpx;
			height: 6rpx;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(78, 122, 243, 0.5);
			border-radius: 10rpx;
		}

		&::-webkit-scrollbar-track {
			background-color: rgba(78, 122, 243, 0.1);
			border-radius: 10rpx;
		}
	}

	.top-students {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.top-student-card {
			flex: 1;
			margin: 0 15rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-5rpx);
				box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.12);
			}

			.student-avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				border: 4rpx solid #fff;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			}

			.student-info {
				display: flex;
				flex-direction: column;

				.title {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 5rpx;
				}

				.score {
					font-size: 32rpx;
					color: #4e7af3;
					font-weight: bold;
				}
			}
		}
	}

	.charts-section {
		display: flex;
		margin-bottom: 30rpx;

		.chart-container {
			flex: 1;
			margin: 0 15rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

			.chart-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}

			qiun-data-charts {
				width: 100%;
				height: 300rpx;
			}
		}
	}

	.main-content {
		display: flex;
		margin-bottom: 30rpx;
	}

	.left-section {
		flex: 2;
		margin-right: 30rpx;

		.weekly-trend-chart {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 15px;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 30rpx;
			}

			qiun-data-charts {
				width: 100%;
				height: 400rpx;
			}
		}
	}

	.right-section {
		flex: 1;
	}

	.subject-praise {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 30rpx;
		}

		.subject-list {
			.subject-item {
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.subject-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #4e7af3;
					display: block;
					margin-bottom: 20rpx;
					padding-bottom: 10rpx;
					border-bottom: 1rpx solid #eee;
				}

				.students-container {
					display: flex;
					flex-wrap: wrap;

					.student-tag {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 30rpx;
						margin-bottom: 20rpx;
						padding: 20rpx;
						background: rgba(78, 122, 243, 0.1);
						border-radius: 16rpx;
						width: 160rpx;

						.avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-bottom: 15rpx;
							border: 2rpx solid #fff;
							box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
						}

						.student-name {
							font-size: 26rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 5rpx;
							text-align: center;
						}

						.praise-reason {
							font-size: 24rpx;
							color: #666;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.recent-scores {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

		.section-header {
			margin-bottom: 30rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 15rpx;
			}

			.section-underline {
				width: 80rpx;
				height: 4rpx;
				background: linear-gradient(90deg, #4e7af3, #8a63f2);
				border-radius: 2rpx;
			}
		}

		.score-list {
			max-height: 400rpx;

			.score-item {
				display: flex;
				align-items: center;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #eee;
				animation: fadeInUp 0.5s ease both;

				&:last-child {
					border-bottom: none;
				}

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					border: 2rpx solid #fff;
					box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
				}

				.info {
					flex: 1;

					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						display: block;
						margin-bottom: 5rpx;
					}

					.reason {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 5rpx;
					}

					.time {
						font-size: 22rpx;
						color: #999;
					}
				}

				.score {
					font-size: 32rpx;
					font-weight: bold;
					color: #4e7af3;
					background: rgba(78, 122, 243, 0.1);
					padding: 5rpx 15rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.trend-analysis {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 30rpx;
		}

		.analysis-content {
			display: flex;

			.analysis-chart {
				flex: 2;
				padding-right: 30rpx;

				qiun-data-charts {
					width: 100%;
					height: 400rpx;
				}
			}

			.analysis-text {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.analysis-item {
					background: rgba(78, 122, 243, 0.1);
					border-radius: 16rpx;
					padding: 20rpx;
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.item-title {
						font-size: 26rpx;
						font-weight: bold;
						color: #333;
						display: block;
						margin-bottom: 10rpx;
					}

					.item-value {
						font-size: 32rpx;
						font-weight: bold;
						color: #4e7af3;
						display: block;
						margin-bottom: 5rpx;
					}

					.item-desc {
						font-size: 24rpx;
						color: #666;
						display: block;
					}
				}
			}
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (orientation: landscape) {
		.dashboard-header {
			.title {
				font-size: 56rpx;

				&::after {
					height: 8rpx;
				}
			}

			.date-info {
				font-size: 32rpx;
			}
		}

		.top-students {
			.top-student-card {
				padding: 40rpx;

				.student-avatar {
					width: 150rpx;
					height: 150rpx;
				}

				.student-info {
					.title {
						font-size: 32rpx;
					}

					.name {
						font-size: 40rpx;
					}

					.score {
						font-size: 36rpx;
					}
				}
			}
		}

		.charts-section {
			.chart-container {
				qiun-data-charts {
					height: 350rpx;
				}
			}
		}

		.weekly-trend-chart {
			qiun-data-charts {
				height: 450rpx !important;
			}
		}

		.trend-analysis {
			.analysis-content {
				.analysis-chart {
					qiun-data-charts {
						height: 450rpx !important;
					}
				}
			}
		}
	}
</style>